<script lang="ts" setup>
  import { ref } from 'vue'
  import {
    HomeFilled,
    Menu as IconMenu,
    Setting,
  } from '@element-plus/icons-vue'

  import { ElMenu, ElIcon, ElMenuItem } from 'element-plus'
  import { useRouter } from 'vue-router';

  const isCollapse = ref(false)
  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }

  const router = useRouter();

  const navigateTo = (path: string) => {
    router.push(path);
  }

  defineExpose({ navigateTo });


</script>

<template>
  <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
    @close="handleClose" background-color="#324057" text-color="#fff" active-text-color="#ffd04b">

    <el-menu-item index="1" @click="navigateTo('/admin/index')">
      <el-icon>
        <HomeFilled />
      </el-icon>
      <template #title>首页</template>
    </el-menu-item>
    <el-menu-item index="2" @click="navigateTo('/admin/libraries/index')">
      <el-icon>
        <icon-menu />
      </el-icon>
      <template #title>信息管理</template>
    </el-menu-item>
    <el-menu-item index="3" @click="navigateTo('/admin/setting')">
      <el-icon>
        <setting />
      </el-icon>
      <template #title>设置</template>
    </el-menu-item>
  </el-menu>
</template>


<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>